<template>
  <div>
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow />

    <!-- 侧边栏导航 -->
    <div class="cateInfo">
      <van-sidebar @change='changeBar' v-model="activeKey">
        <van-sidebar-item
          v-for="item in catelist"
          :key='item.id'
          :title="item.catename" />
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item
          @click="goList"
          :to="'/list?id='+item.id"
          v-for="item in secondCate"
          :key='item.id' >
            <van-image :src="item.img" />
            <p>{{item.catename}}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import {getCate} from '../request/api'
export default {
  data() {
    return {
      activeKey: 0,
      catelist:[],
      secondCate:[]
    };
  },
  methods: {
    //封装一个切换事件
    changeBar(){
      //重新给二级分类赋值
      this.secondCate = this.catelist[this.activeKey].children
    },
    goList(id){
      this.$router.push({
        path:'/list',
        query:{
          id
        }
      })
    }
  },
  mounted() {
    //调取分类接口
    getCate().then(res=>{
      if(res.data.code == 200){
        this.catelist = res.data.list
        this.secondCate = res.data.list[0].children
      }
    })
  }
};
</script>

<style scoped>
.cateInfo{
    display: flex;
}
.van-grid{
    flex:1
}
</style>
